<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father{
            width: 500px;
            height: 500px;
            background-color: blue;
        }
        .son{
            width: 300px;
            height: 300px;
            background-color: rgb(221, 0, 0);
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <script>
        /*
         事件捕获概念：从DOM的根元素开始去执行对应的事件(从外到里)
         */
        document.addEventListener("click",function(){
            console.log("我是document（爷爷）");
        },true) // addEventListener的第三个参数传入true代表捕获阶段触发，false代表冒泡阶段触发(默认false 冒泡)
        document.querySelector(".father").addEventListener("click",function(){
            console.log("我是div类名为father（爸爸）");

        },true) // addEventListener的第三个参数传入true代表捕获阶段触发，false代表冒泡阶段触发(默认false 冒泡)
        document.querySelector(".son").addEventListener("click",function(){
            console.log("我是div类名为son（儿子）");

        },true) // addEventListener的第三个参数传入true代表捕获阶段触发，false代表冒泡阶段触发(默认false 冒泡)
    </script>
</body>
</html>